<template>
  <!-- 工作台 -->
  <div class="page100">
    <!-- 左侧 -->
    <div class="leftPart">
      <corner-card>
        <div slot="head" class="todo_center_head">
          <div class="txt_tab" :class="{'active':activeIndex === 1}" @click="onTabChange(1)">
            <el-badge :max="99" :value="waitTotal > 0 ? waitTotal : ''">
              <span>待办</span>
            </el-badge>
          </div>
          <div class="txt_tab" :class="{'active':activeIndex === 2}" @click="onTabChange(2)">已办</div>
        </div>
        <div slot="content" class="leftconext" :class="{'flex_center':waitArray.length==0}" v-if="activeIndex === 1 || activeIndex === 2">
          <div v-loading="loadingWait" v-if="waitArray.length > 0 && (activeIndex === 1 || activeIndex === 2)" style="height: 100%">
            <el-scrollbar style="width: 100%;height: 100%;" wrap-style="overflow-x:hidden;">
              <div class="todo_center_content ">
                <div class="todo_item" v-for="(item, index) in waitArray" :key="index">
                  <div class="flex_align mb19">
                    <div class="name flex_1">{{ item.title }}</div>
                    <div class="btn" :class="{'green':activeIndex==2}" @click="doAudit(item)">{{activeIndex === 1?'处理':'查看' }}</div>
                  </div>
                  <div class="flex_between">
                    <div class="name2">{{ item.moduleName }}</div>
                    <div class="flex_align">
                      <div class="name2 mr31">{{ item.userName }}</div>
                      <div class="name2">{{ item.createTime }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </el-scrollbar>
          </div>
          <div v-else class="empty_content">
            <img class="emptyImg" src="@/assets/images/homePage/no-img.png" alt="待办缺省" />
            <div class="tipTitle">暂无待办</div>
          </div>
        </div>
      </corner-card>
    </div>

    <!-- 右侧 -->
    <div class="rightPart flex_1">
      <div class="project_month">
        <corner-card>
          <div class="flex_1 flex_between" slot="head">
            <div class="title">年月进度(万元)
            </div>
            <el-date-picker v-model="month" type="month" @change="initTopBar()" format="yyyy年M月" :clearable="false" />
          </div>
          <div class="construct_body" slot="content">
            <div class="item" v-for="(item, index) in topRightData" :key="index" @click="onChangeYm(item.id)">
              <div class="flex_align">
                <div class="flex_1 detail">
                  <div class="detail-title">{{item.type}}计划</div>
                  <div class="detail-number colorBlue">{{item.planNumer}}</div>
                </div>
                <div class="flex_1 detail">
                  <div class="detail-title">{{item.type}}完成</div>
                  <div class="detail-number colorGreen">{{item.completeNumber}}</div>
                </div>
              </div>
              <!--  -->
              <div class="item-middle">
                <div class="percent-title">总体进度</div>
                <el-progress :stroke-width="10" :percentage="getPercent(item)" text-color="black"></el-progress>
              </div>
              <div class="item-bottom">
                <div class="project-info" v-for="(jtem, jndex) in item.rank" :key="jndex">
                  <div v-if="projectsArr[jndex]" class="flex_between">
                    <div class="flex_align">
                      <img :src="jtem.src">
                      <div class="name">{{projectsArr[jndex].name}}</div>
                    </div>
                    <div class="flex_align">
                      <el-progress type="circle" :width="12" :stroke-width="2" :percentage="jtem.percent" :show-text="false"></el-progress>
                      <div class="percent">{{jtem.percent}}%</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </corner-card>
      </div>
      <!--  -->
      <div v-if="false" class="centerSec">
        <corner-card>
          <div class="title flex_align" slot="head">
            <span class="clickable">工程进度
            </span>
          </div>
          <div class="h100" slot="content">
            <div class="wh100" id="bottomBar"></div>
          </div>
        </corner-card>
      </div>
      <!-- 预警 -->
      <div class="warn flex_1">
        <corner-card>
          <div slot="head" class="todo_center_head">
            <div class="txt_tab" :class="{'active':warnIndex === 1}" @click="onWarnChange(1)">
              <el-badge :max="99" :value="warnList.length > 0 ? warnList.length : ''">
                <span>预警</span>
              </el-badge>
            </div>
            <div class="more" @click="onMore">更多</div>
          </div>
          <div slot="content" :class="{'wh100 flex_center':warnList.length==0}">
            <div v-loading=" warnLoadWait" style="height: 100%" v-if="warnList.length>0">
              <div class="todo_center_content">
                <div class="warn_one" v-for="(item, index) in warnList" :key="index" @click="onYJOpen(item.warningType,item,'approve','审核')">
                  <div class="flex_align mb11">
                    <div class="warn_title flex_1" :style="item.warningType=='ff8080818bff58ff018c484b015e098f'?'color:#E45050;':''">{{ item.title }}</div>
                    <div class="warn_label" :style="{background:item.warningType?labelStr[item.warningType].bg:'transparent'}">{{item.warningType? labelStr[item.warningType].name:''}}</div>
                  </div>
                  <div class="flex_between warn_name2">
                    <div>【{{ item.projectName}}】 - 【{{item.sectionName}}】</div>
                    <div>{{ item.warningTime}}</div>
                  </div>
                </div>
              </div>
            </div>
            <div v-else class="empty_content">
              <!-- <img class="emptyImg" src="@/assets/images/homePage/no-img.png" alt="缺省" /> -->
              <div class="tipTitle">暂无预警</div>
            </div>
          </div>
        </corner-card>
      </div>
    </div>
    <!-- 智慧工地弹框 -->
    <el-dialog :visible.sync="formShow" @close="formShow=false" :modal-append-to-body="false" :close-on-click-modal="false" title="预警" append-to-body width="70%">
      <el-form :model="form" label-width="120px" size="small">
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目名称">
              <el-input v-model="form.projectName" :disabled="true"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="摄像头编号">
              <el-input v-model="form.a" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="拍摄位置">
              <el-input v-model="form.c" :disabled="true"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="是否佩戴安全帽">
              <el-input v-model="form.b" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="拍摄时间">
              <el-input v-model="form.warningTime" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <img class="yjImg" :src="form.img">
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>

    <!-- 预警列表弹框 -->
    <el-dialog :visible.sync="formShowList" @close="formShowList=false" :modal-append-to-body="false" :close-on-click-modal="false" append-to-body width="70%">
      <span slot="title">
        <i class="iconfont icon-zhiliangguanli1"></i>
        <span>预警</span>
      </span>

      <el-tabs style="padding:0 15px;" v-model="yjsearch.lableType" @tab-click="onChangeWarn">
        <el-tab-pane v-for="(item,index) in labelTypeList" :key="'lable'+index" :label="item.name" :name="item.id"></el-tab-pane>
      </el-tabs>

      <div class="WholeScroll list_wrap" style="height: 580px; overflow: auto;padding: 0 15px;">
        <el-table ref="yjTable" :data="warnListPop" :border="true" tooltip-effect="dark" style="width: 100%; font-family: PingFangSC-Regular; font-size: 14px" :row-class-name="tableRowStyleName" :cell-class-name="tableCellStyleName" :header-cell-class-name="tableHeaderCellStyleName" :row-style="rowStyle" :cell-style="cellStyle">
          <el-table-column label="序号" width="60" align="center">
            <template slot-scope="scope">
              {{  scope.$index +1+yjsearch.pageNo * yjsearch.pageSize }}
            </template>
          </el-table-column>

          <el-table-column show-overflow-tooltip label="标题" prop="title" min-width="380"></el-table-column>

          <el-table-column label="所属项目" prop="projectName" width="160"></el-table-column>

          <el-table-column v-if="yjsearch.lableType=='0'" label="预警类型" width="100">
            <template slot-scope="scope">
              {{ labelStr[scope.row.warningType].name }}
            </template>
          </el-table-column>

          <el-table-column label="预警时间" prop="warningTime" width="140"></el-table-column>

          <el-table-column v-if="['ff8080818bff58ff018c484aa019098b','ff8080818bff58ff018c484ab390098c','ff8080818bff58ff018c484acc83098d'].indexOf(yjsearch.lableType)!==-1" label="预警状态" width="140">
            <template slot-scope="scope">
              {{scope.row.warningState==0?'临期预警':'延期预警'}}
            </template>
          </el-table-column>

          <el-table-column width="200" label="操作" fixed="right">
            <template slot-scope="scope">
              <div class="flex_align">
                <!-- @click="onYJOpen(scope.row.warningType,scope.row,'approve','审核')" -->
                <el-button :class="{'isGray':scope.row.isGray}" v-if="scope.row.treatmentState=='0'&&['ff8080818bff58ff018c484aa019098b','ff8080818bff58ff018c484ab390098c','ff8080818bff58ff018c484acc83098d'].indexOf(yjsearch.lableType)!==-1" size="mini" class="menu_icon iconfont icon-xiugai-copy action_color1" @click.stop="onRemind(scope.row)">&nbsp;催办</el-button>
                <el-button size="mini" class="menu_icon iconfont icon-icon_look action_color1" @click="onYJOpen(scope.row.warningType,scope.row,'check','查看')">&nbsp;查看</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="float: right; margin-top: 30px;" layout="prev, pager, next,total" :page-size="yjsearch.pageSize" :total="yjsearch.total" :current-page="yjsearch.pageNo + 1" :prev-text="tablePaginationPrev" :next-text="tablePaginationNext" @current-change="paginationChange">
        </el-pagination>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="formShowList=false">
          <i class="iconfont icon-icon_cancel"></i> 取 消
        </el-button>
      </div>
    </el-dialog>

    <!-- 质量检查 -->
    <qualityDetail :postDetail="postDetailData" @reloadList="onRoad('quality')"></qualityDetail>

    <!-- 监督检查详情 -->
    <supervisionDetail :postDetail="postDetailData1" @reloadList="onRoad('supervision')"></supervisionDetail>

    <!-- 安全整改 -->
    <safetyDetail :postDetail="postDetailData2" @reloadList="onRoad('safety')"></safetyDetail>
  </div>
</template>
<script>
import * as echarts from "echarts";
import store from '@/store'
import CornerCard from './cornerCard.vue';
import msgUtil from '@/utils/msgUtil'
import { Debounce, Throttle } from '@/assets/debounce'
import { tableRowStyleGol, tableCellStyleGol, tableHeaderCellStyleGol } from '@/utils/publicFun'
import progressBoard from '@/api/buss/progressboard'
import todo from '@/api/wf/todo'
import crudDict from '@/api/system/dict'
import workbench from '@/api/buss/workbench'
// import taskManage from "@/api/buss/taskManage";
// import {getWorkTableProblemListNew} from "../../../api/buss/workbench";
export default {
  name: 'workBench',
  components: {
    CornerCard,
    qualityDetail: require(`@/views/qualityCheck/qualityInspection/qualityInspection-detail.vue`).default,
    supervisionDetail: require(`@/views/qualityCheck/supervision/supervision-detail.vue`).default,
    safetyDetail: require(`@/views/supervisionCheck/securityCheck/safetyRectification/safetyRectification-detail`).default,
  },
  data() {
    return {
      tableRowStyleName: tableRowStyleGol,
      tableCellStyleName: tableCellStyleGol,
      tableHeaderCellStyleName: tableHeaderCellStyleGol,
      totalWarn: [],//全部预警数据
      formShowList: false,//列表
      formShow: false,//智慧工地弹框
      postDetailData: {
        show: false,
        type: 'build',
        typeName: '新增',
      },
      postDetailData1: {
        show: false,
        type: 'build',
        typeName: '新增',
      },
      postDetailData2: {
        show: false,
        type: 'build',
        typeName: '新增',
      },
      pic: require('@/assets/images/workbench/yj.png'),
      form: {},
      projectsArr: [],
      activeIndex: 1,
      loadingWait: false,
      waitTotal: 0,
      waitArray: [],
      //
      month: new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1),
      topRightData: [
        {
          id: 1,
          type: '本年',
          planNumer: '100',
          completeNumber: '50',
          totalPercent: 0,
          rank: [
            {
              name: '项目简称',
              percent: 78,
              src: require(`@/assets/images/no1.png`)
            },
            {
              name: '项目简称',
              percent: 65,
              src: require(`@/assets/images/no2.png`)
            },
            {
              name: '项目简称',
              percent: 56,
              src: require(`@/assets/images/no3.png`)
            }
          ]
        },
        {
          id: 2,
          type: '半年',
          planNumer: '60',
          completeNumber: '30',
          totalPercent: 0,
          rank: [
            {
              name: '项目简称',
              percent: 78,
              src: require(`@/assets/images/no1.png`)
            },
            {
              name: '项目简称',
              percent: 69,
              src: require(`@/assets/images/no2.png`)
            },
            {
              name: '项目简称',
              percent: 39,
              src: require(`@/assets/images/no3.png`)
            }
          ]
        },
        {
          id: 3,
          type: '本月',
          planNumer: '50',
          completeNumber: '20',
          totalPercent: 0,
          rank: [
            {
              name: '项目简称',
              percent: 81,
              src: require(`@/assets/images/no1.png`)
            },
            {
              name: '项目简称',
              percent: 54,
              src: require(`@/assets/images/no2.png`)
            },
            {
              name: '项目简称',
              percent: 46,
              src: require(`@/assets/images/no3.png`)
            }
          ]
        }
      ],
      //预警
      warnIndex: 1,
      warnLoadWait: false,
      warnTotal: 0,
      warnList: [],
      statisticType: '年度',
      warnListPop: [],
      labelStr: {
        'ff8080818bff58ff018c484b015e098f': { name: '变更预警', bg: '#E45050' },
        'ff8080818bff58ff018c484a59ab098a': { name: '智慧工地', bg: '#9051E5' },
        'ff8080818bff58ff018c484aa019098b': { name: '安全预警', bg: '#49C9E8' },
        'ff8080818bff58ff018c484ab390098c': { name: '督查预警', bg: '#F2910E' },
        'ff8080818bff58ff018c484ae4d8098e': { name: '批复项预警', bg: '#EDC108' },
        'ff8080818bff58ff018c484acc83098d': { name: '质量预警', bg: '#005FFF' },
        '2c93d5ee8c494146018c5d656872014d': { name: '进度预警', bg: '#EDC108' }
      },
      yjsearch: {
        lableType: '',
        pageSize: 10,
        pageNo: 0,
        total: 0
      },
      tablePaginationPrev: '上一页',
      tablePaginationNext: '下一页',
      labelTypeList: []
    };
  },
  mounted() {
    this.init()
  },
  methods: {
    onChangeYm(id) {
      let url = ''
      let query = {}
      if (id == 1 || id == 2) {
        url = '/investmentmanagement/annual-plan'
      } else if (id == 3) {
        url = '/investmentmanagement/monthlyreport'
        query = { id: 8 }
      }
      const rData = this.$router.resolve({ path: url, query: query })
      window.open(rData.href, '_blank')
    },
    async init() {
      let arr = JSON.parse(sessionStorage.getItem('projectsArr'))
      if (arr) {
        this.projectsArr = arr
      } else {
        this.projectsArr = await this.getProjectList()
      }
      this.projectsArr.splice(0, 1)
      this.getWaitDo();
      this.initTopBar();//投资进度
      // this.initBottomBar()//
      this.getDicts()//字典数
      this.getWarnList()//预警接口
    },
    onRoad(type) {
      console.log("处理类型type=", type)
      this.getWaitDo();
      if (this.formShowList == true) {
        this.yjsearch.pageNo = 0
        this.total = 0
        this.getWarnList(true)
      } else {
        this.getWarnList()
      }
    },
    getDicts() {
      crudDict.getByCode('warningType').then(res => {
        if (res.code === 200) {
          res.data.map(e => {
            this.$set(this.labelStr[e.id], 'name', e.name)
          })
          //
          this.labelTypeList = res.data
          this.labelTypeList.splice(0, 0, { id: '0', name: '全部' })
          // this.labelTypeList = res.data.filter(e => e.id !== 'ff8080818bff58ff018c484a59ab098a')
        } else {
          msgUtil.error2(res.data.message)
        }
      })
    },
    //type:查找类别；5️无则查去全部数据
    getWarnList(type) {
      console.log("预警type=", type)
      const userId = store.getters.user.id;
      let data = {}
      if (type) {
        data = {
          pageNo: this.yjsearch.pageNo,
          pageSize: this.yjsearch.pageSize,
          warningType: this.yjsearch.lableType !== '0' ? this.yjsearch.lableType : '',
          initiator: userId
        }
      } else {
        data = { pageNo: 0, pageSize: 99, initiator: userId }//
      }
      workbench.getWarn(data).then(res => {
        let { code, data, msg } = res
        if (code === 200) {
          if (type) {
            if (['ff8080818bff58ff018c484aa019098b', 'ff8080818bff58ff018c484ab390098c', 'ff8080818bff58ff018c484acc83098d'].indexOf(this.yjsearch.lableType) !== -1) {
              let res = data.content
              let now = new Date().Format("yyyy-MM-dd")
              for (let i = 0; i < res.length; i++) {
                if (res[i].treatmentState == 0) {
                  this.$set(res[i], 'isGray', false)
                  if (res[i].warningTime && (new Date(res[i].warningTime).getTime() >= new Date(now).getTime())) {
                    res[i].isGray = true
                  }
                }
              }
              this.warnListPop = res
            } else {
              this.warnListPop = data.content
            }
            this.yjsearch.total = data.totalElements
          } else {
            let list = []
            //未处理的预警数据
            list = data.content.filter(e => e.treatmentState == '0')
            this.warnList = list.filter((e, index) => index < 8)
          }
        } else {
          msgUtil.error2(msg)
        }
        this.warnLoadWait = false
      }).catch(() => {
        this.warnLoadWait = false;
        msgUtil.error2('获取待办事项失败!')
      })
    },
    rowStyle({ row, column, rowIndex, columnIndex }) {
      if (row.isGray) {
        return { backgroundColor: "#f8f8f8!important", color: 'rgba(46,56,77,.46)!important' }
      }
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (row.isGray) {
        return { color: 'rgba(46,56,77,.46)!important' }
      }
    },
    onRemind(data) {
      if (!data.isGray) {
        this.$httpPost('/buss/earlyWarning/reminder', { id: data.id }).then(res => {
          let { code, data, msg } = res
          if (code === 200) {
            msgUtil.success2(msg)
            this.getWarnList(true)
          } else {
            msgUtil.error2(msg)
          }
        }).catch(() => {
          msgUtil.error2('获取待办事项失败!')
        })
      }
    },
    onMore() {
      this.formShowList = true
      this.yjsearch.lableType = '0'
      this.pageNo = 0
      this.total = 0
      this.getWarnList(true)
    },
    onChangeWarn() {
      this.yjsearch.pageNo = 0
      this.total = 0
      this.getWarnList(true)
    },
    getProjectList() {
      return new Promise((resolve, reject) => {
        this.$httpGet("/buss/commonAPI/getProjectList").then(res => {
          if (res.code === 200) {
            resolve(res.data)
          } else {
            resolve([])
            this.$messageError('获取项目下拉列表失败')
          }
        }).catch(err => {
          console.log(err)
          this.$messageError('获取项目下拉列表失败')
        })
      })
    },
    getWaitDo() {
      this.waitArray = [];
      this.waitTotal = 0;
      this.loadingWait = true
      const userId = store.getters.user.id;
      // const userId = '402891548bb86fd5018bb89e4d0c0007'
      todo.getList({ pageNo: 0, pageSize: 99, userId: userId }).then(({ code, data }) => {
        if (code === 200) {
          this.waitArray = data.content;
          this.waitTotal = data.content.length;
          this.loadingWait = false;
        } else {
          this.loadingWait = false;
          msgUtil.error2(data.message)
        }
      }).catch(() => {
        this.loadingWait = false;
        msgUtil.error2('获取待办事项失败!')
      })
    },
    getOkDo() {
      this.loadingWait = true;
      this.waitArray = [];
      const userId = store.getters.user.id;
      todo.getDoneList({ pageNo: 0, pageSize: 99, userId: userId }).then(({ code, data }) => {
        if (code === 200) {
          // let list = []
          // let length = data.content.length > 5 ? 5 : data.content.length
          // for (let i = 0; i < length; i++) {
          //   list.push(data.content[i])
          // }
          this.waitArray = data.content;
          this.loadingWait = false;
        } else {
          this.loadingWait = false;
          msgUtil.error2(data.message);
        }
      }).catch(() => {
        this.loadingWait = false;
        msgUtil.error2('获取已办事项失败!')
      });
    },
    paginationChange(index) {
      this.yjsearch.pageNo = index - 1
      this.getWarnList(true)
    },
    showDialog(type, typeNmae, detailId) {
      switch (type) {
        case 'check':
          // this.postDetailData = {
          //   show: true,
          //   type: type,
          //   typeNmae: typeNmae,
          //   detailId: detailId,
          // }
          break
      }
    },
    onTabChange(index) {
      this.activeIndex = index;
      if (index === 1) {
        this.getWaitDo();
      } else if (index === 2) {
        console.log("activeIndex=", this.activeIndex)
        this.getOkDo();
      }
    },
    /*消息代办处理*/
    doAudit1(val) {
      this.$router.push({ path: val.path, query: { id: val.entityId } })
    },
    doAudit(item) {
      let data = { type: '', typeName: '' }
      if (this.activeIndex == 1) {//待办
        data.type = 'approve'
        data.typeName = '审核'
      } else {//已办
        data.type = 'check'
        data.typeName = '查看'
      }
      if (item.moduleName == "监督检查") {
        this.postDetailData1 = {
          show: true,
          type: data.type,
          typeName: data.typeName,
          detailId: item.entityId
        }
      } else if (item.moduleName == '质量巡检') {
        this.postDetailData = {
          show: true,
          type: data.type,
          typeName: data.typeName,
          detailId: item.entityId
        }
      } else if (item.moduleName == '安全整改') {
        this.postDetailData2 = {
          show: true,
          type: data.type,
          typeName: data.typeName,
          detailId: item.entityId
        }
      }
    },
    initTopBar() {
      // const params = {
      //   year: this.month.getFullYear(),
      //   month: this.month.getMonth() + 1,
      // }
      // progressBoard.annualPlan(params).then(res => {
      //   if (res.code === 200) {
      //     let rank = 0
      //     let percent = 100
      //     this.topRightData = [
      //       {
      //         type: '本年',
      //         planNumer: Number(res.data.listYear.reduce((prev, cur) => {
      //           return prev + cur.planinvestment_year
      //         }, 0)).toFixed(0),
      //         completeNumber: Number(res.data.listYear.reduce((prev, cur) => {
      //           return prev + cur.completinvestment_year
      //         }, 0)).toFixed(0),
      //         totalPercent: res.data.listYear.reduce((prev, cur) => {
      //           return prev + cur.completinvestment_year_per
      //         }, 0),
      //         rank: res.data.listYear.map((item, index) => {
      //           if (index === 0) {
      //             rank = 0
      //             percent = 100
      //           }
      //           if (item.completinvestment_year_per < percent || index === 0) {
      //             rank++
      //             percent = item.completinvestment_year_per
      //           }
      //           return {
      //             name: item.name,
      //             percent: item.completinvestment_year_per,
      //             src: require(`@/assets/images/no${rank}.png`)
      //           }
      //         })
      //       },
      //       {
      //         type: '半年',
      //         planNumer: Number(res.data.listHalfYear.reduce((prev, cur) => {
      //           return prev + cur.planinvestment_half_year
      //         }, 0)).toFixed(0),
      //         completeNumber: Number(res.data.listHalfYear.reduce((prev, cur) => {
      //           return prev + cur.completinvestment_half_year
      //         }, 0)).toFixed(0),
      //         totalPercent: res.data.listHalfYear.reduce((prev, cur) => {
      //           return prev + cur.completinvestment_half_year_per
      //         }, 0),
      //         rank: res.data.listHalfYear.map((item, index) => {
      //           if (index === 0) {
      //             rank = 0
      //             percent = 100
      //           }
      //           if (item.completinvestment_half_year_per < percent || index === 0) {
      //             rank++
      //             percent = item.completinvestment_half_year_per
      //           }
      //           return {
      //             name: item.name,
      //             percent: item.completinvestment_half_year_per,
      //             src: require(`@/assets/images/no${rank}.png`)
      //           }
      //         })
      //       },
      //       {
      //         type: '本月',
      //         planNumer: Number(res.data.listMonth.reduce((prev, cur) => {
      //           return prev + cur.planinvestment_month
      //         }, 0)).toFixed(0),
      //         completeNumber: Number(res.data.listMonth.reduce((prev, cur) => {
      //           return prev + cur.investmentcomplet_month
      //         }, 0)).toFixed(0),
      //         totalPercent: res.data.listMonth.reduce((prev, cur) => {
      //           return prev + cur.investmentcomplet_month_per
      //         }, 0),
      //         rank: res.data.listMonth.map((item, index) => {
      //           if (index === 0) {
      //             rank = 0
      //             percent = 100
      //           }
      //           if (item.investmentcomplet_month_per < percent || index === 0) {
      //             rank++
      //             percent = item.investmentcomplet_month_per
      //           }
      //           return {
      //             name: item.name,
      //             percent: item.investmentcomplet_month_per,
      //             src: require(`@/assets/images/no${rank}.png`)
      //           }
      //         })
      //       }
      //     ]
      //   }
      // })
    },
    getPercent(item) {
      if (Number(item.planNumer) === 0 && item.completeNumber > 0) {
        return 100
      }
      return isNaN(Number((item.completeNumber / item.planNumer * 100).toFixed(2))) ? 0 : Number((item.completeNumber / item.planNumer * 100).toFixed(2))
    },
    initBottomBar() {
      const flagMap = {
        '年度': { value: '1', key: 'listYear' },
        '半年度': { value: '2', key: 'listHalfYear' },
        '月度': { value: '3', key: 'listMonth' },
      }
      const params = {
        year: this.month.getFullYear(),
        month: this.month.getMonth() + 1,
        flag: flagMap[this.statisticType].value
      }
      // progressBoard.investmentProgress(params).then(res => {
      //   if (res.code === 200) {
      this.bottomBarInstance && this.bottomBarInstance.clear()
      this.bottomBarInstance && this.bottomBarInstance.dispose()
      let chartDom = document.getElementById('bottomBar')
      let myChart = echarts.init(chartDom)
      let option = {
        grid: {
          top: '5px',
          left: '3%',
          right: '5%',
          bottom: '10px',
          containLabel: true
        },
        tooltip: {
          show: "true",
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: 'rgba(108,128,151,0.3)',
            }
          },
          splitNumber: 5,
          name: '%',
          nameLocation: 'end',
          nameTextStyle: {
            align: 'right'
          }
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#707070',
              }
            },
            axisLabel: {
              color: '#7C7C7C',
              interval: 0,
              rotate: 20
            },
            data: this.projectsArr.map(e => e.name)
          }
        ],
        series: [
          {
            name: '实际金额',
            type: 'bar',
            barGap: '-100%',
            itemStyle: {
              normal: {
                show: true,
                color: '#E4ECFC',
                borderRadius: [8, 8, 0, 0]
              }
            },
            barWidth: 20,
            data: [30, 40, 50, 60, 80, 90, 100, 90, 50, 60, 40, 60]
          },
          {
            name: '计划金额',
            type: 'bar',
            itemStyle: {
              normal: {
                show: true,
                color: '#3982FA',
                borderRadius: [8, 8, 0, 0]
              }
            },
            barWidth: 20,
            data: [20, 30, 40, 50, 10, 60, 80, 70, 90, 100, 50, 30]
          }
        ]
      }
      setTimeout(() => {
        option && myChart.setOption(option)
        this.bottomBarInstance = myChart
      }, 200);

      //   }
      // })
    },
    /** 预警处理 */
    onWarnChange(index) {
      this.activeIndex = index;
      if (index === 1) {
        this.getWarnList()
      } else if (index === 2) {
        // this.getOkDo();
      }
    },
    onYJOpen(type, object, dealtype, dealName) {
      if (type == 'ff8080818bff58ff018c484a59ab098a') {//智慧工地
        let imgList = {
          '2c93d5ee8c482db9018c48cacea80313': require('@/assets/images/workbench/yj1.png'),
          '2c93d5ee8c482db9018c48cacea80312': require('@/assets/images/workbench/yj2.png'),
          '2c93d5ee8c482db9018c48cacea80311': require('@/assets/images/workbench/yj3.png'),
          '2c93d5ee8c482db9018c48cacea80310': require('@/assets/images/workbench/yj4.png'),
          '2c93d5ee8c482db9018c48cacea80314': require('@/assets/images/workbench/yj5.png')
        }
        this.formShow = true
        this.form = object
        this.form.a = this.form.id.substr(this.form.id.length - 1, 1) + '号'
        this.form.c = this.form.projectName + '视频1'
        this.form.b = '否'
        this.form.img = imgList[this.form.id] ? imgList[this.form.id] : this.pic
      } else if (type == 'ff8080818bff58ff018c484aa019098b') {//安全预警
        if (object.entityId) {
          this.postDetailData2 = {
            show: true,
            type: dealtype,
            typeName: dealName,
            detailId: object.entityId
          }
        } else {
          msgUtil.error2('获取详情失败')
        }
      } else if (type == 'ff8080818bff58ff018c484ab390098c') {//督查预警--监督检查
        if (object.entityId) {
          this.postDetailData1 = {
            show: true,
            type: dealtype,
            typeName: dealName,
            detailId: object.entityId
          }
        } else {
          msgUtil.error2('获取详情失败')
        }
      } else if (type == 'ff8080818bff58ff018c484ae4d8098e') {//批复项预警
        // const rData = this.$router.resolve({ path: '/process/approveItem' })
        // window.open(rData.href, '_blank')
        this.$router.push('/process/approveItem')
      } else if (type == 'ff8080818bff58ff018c484acc83098d') {//质量预警
        if (object.entityId) {
          this.postDetailData = {
            show: true,
            type: dealtype,
            typeName: dealName,
            detailId: object.entityId
          }
        } else {
          msgUtil.error2('获取详情失败')
        }
      } else if (type == 'ff8080818bff58ff018c484b015e098f') {//变更预警
        // const rData = this.$router.resolve({ path: '/changeManagement/designChangeApply' })
        // window.open(rData.href, '_blank')
        this.$router.push('/changeManagement/designChangeApply')
      } else if (type == '2c93d5ee8c494146018c5d656872014d') {//进度预警
        // const rData = this.$router.resolve({ path: '/contract/measureRegistration' })
        // window.open(rData.href, '_blank')
        this.$router.push('/contract/measureRegistration')
      }
    }
  },
};
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/function.scss";
@import "~@/assets/styles/homepage.scss";
.leftPart {
  width: 638px;
  margin-right: 24px;
  .leftconext {
    height: 100%;
    padding-bottom: 5px;
  }
}
.rightPart {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.todo_center_head {
  height: 100%;
  display: flex;
  .txt_tab {
    font-size: 16px;
    font-weight: 500;
    color: rgba(44, 44, 44, 0.36);
    margin-right: 57px;
    cursor: pointer;
    position: relative;
    margin-top: px_2_vh(18px);
    &.active {
      color: #2c2c22;
      border-bottom: 3px solid #1763ff;
    }
  }
}
.todo_center_content {
  height: 100%;
  width: 100%;
  padding: 0 33px;
  box-sizing: border-box;
}
.todo_item {
  background: #f8f8f8;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  border: 2px solid transparent;
  box-sizing: border-box;
  padding: 14px 16px;
  margin-bottom: 20px;
  .name {
    font-size: 15px;
    color: #2e384d;
    font-family: Microsoft YaHei;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-right: 25px;
  }
  .mr31 {
    margin-right: 31px;
  }
  .mb19 {
    margin-bottom: 10px;
  }
  .name2 {
    font-size: 12px;
    font-family: Microsoft YaHei;
    color: rgba(46, 56, 77, 0.46);
    margin-bottom: 4px;
  }
  .model {
    font-size: 12px;
    color: #2e384d;
    font-family: X-xiheiti;
    margin-bottom: 4px;
  }
  // .model2 {
  //   font-size: 12px;
  //   font-family: Microsoft YaHei;
  //   color: #9ba0a9;
  // }
  .notice_top {
    max-width: 26vw;
  }
  .btn {
    width: 91px;
    font-size: 14px;
    color: white;
    border-radius: 7px;
    background-color: #2e5bff;
    padding: 8px 15px;
    text-align: center;
    box-sizing: border-box;
    &.green {
      background-color: rgba(33, 190, 39, 1);
    }
  }
  &:hover {
    border-color: #2e5bff;
    .name,
    .model {
      color: #2e5bff;
    }
    .name2,
    .model2 {
      color: rgba(46, 91, 255, 0.47);
    }
  }
}
.warn_one {
  width: 49%;
  background: #f8f8f8;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  border: 2px solid transparent;
  box-sizing: border-box;
  padding: 14px 16px;
  margin-bottom: 20px;
  .warn_title {
    font-size: 16px;
    font-family: MicrosoftYaHei, MicrosoftYaHei;
    font-weight: normal;
    color: #3d3d3d;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-right: 25px;
  }
  .warn_label {
    font-size: 12px;
    border-radius: 3px;
    color: white;
    padding: 5px 8px;
  }
  .warn_name2 {
    font-size: 14px;
    font-family: MicrosoftYaHei, MicrosoftYaHei;
    color: #8d8d8d;
    color: rgba(46, 56, 77, 0.46);
    margin-bottom: 4px;
  }
  .mb11 {
    margin-bottom: 11px;
  }
}
.title {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #1c1e24;
  height: 100%;
  padding-right: 24px;
  box-sizing: border-box;
}
.project_month {
  margin-bottom: 20px;
  ::v-deep {
    .el-date-editor.el-input {
      width: 160px;
      cursor: pointer;
    }
    .el-input__inner {
      text-align: right;
      height: 30px;
      line-height: 30px;
      padding-right: 10px;
    }
    .el-input__icon {
      line-height: 30px;
    }
  }
  .construct_body {
    display: flex;
    justify-content: space-around;
    height: 100%;
    position: relative;
    padding: 0 20px 20px 24px;
    box-sizing: border-box;
    .item {
      width: 32%;
      background-color: #f8f8f8;
      border-radius: 15px;
      padding: 12px;
      box-sizing: border-box;
      cursor: pointer;
      .detail {
        width: 50%;
      }
      .detail-title {
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        color: #333333;
        margin-bottom: 5px;
      }
      .detail-number {
        min-height: 32px;
        font-size: 32px;
        font-family: DIN-Bold, DIN;
        font-weight: bold;
      }
      .colorBlue {
        color: #105cdd;
      }
      .colorGreen {
        color: #429f21;
      }
      .item-middle {
        margin-top: 13px;
        margin-bottom: 24px;
        .percent-title {
          height: 20px;
          font-size: 14px;
          font-family: PingFang SC-Regular, PingFang SC;
          color: #333333;
        }
        ::v-deep {
          .el-progress-bar {
            padding-right: 50px;
            margin-right: -50px;
          }
          .el-progress-bar__inner {
            background-color: unset;
            background-image: linear-gradient(
              270deg,
              #2c79fa 0%,
              rgba(44, 121, 250, 0.18) 100%
            );
            border-radius: 0px 8px 8px 0px;
            opacity: 0.93;
          }
          .el-progress__text {
            width: 50px;
            font-size: 14px !important;
            margin-left: 0px;
            text-align: right;
          }
        }
      }
      .item-bottom {
        .project-info {
          margin-bottom: 10px;
          // &:last-child {
          //   margin-bottom: 0;
          // }
          img {
            width: 26px;
            height: 14px;
            display: block;
          }
          .name {
            font-size: 14px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            color: #333333;
            margin-right: 170px;
            margin-left: 10px;
          }
          .percent {
            font-size: 14px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            color: #000000;
            line-height: 1;
            margin-left: 10px;
            margin-top: 3px;
          }
        }
      }
    }
  }
}
.centerSec {
  margin: 20px 0;
  height: 230px;
}
.warn {
  min-height: 100px;
  ::v-deep .card_body {
    overflow: auto;
  }
  .todo_center_head {
    width: 100%;
    justify-content: space-between;
    padding-right: 24px;
  }
  .more {
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    margin-top: px_2_vh(18px);
    cursor: pointer;
  }
  .todo_center_content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .todo_item {
    width: calc((100% - 16px) / 2);
  }
}
.empty_content {
  .emptyImg {
    display: block;
    width: 200px;
    height: auto;
    margin: 0 auto 10px;
  }
  .tipTitle {
    text-align: center;
  }
}
.yjImg {
  width: 100%;
  height: 501px;
}
.isGray {
  color: rgba(46, 56, 77, 0.46) !important;
  border-color: rgba(46, 56, 77, 0.46) !important;
}
</style>
